<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack" :style="{ marginTop: safeTop + 'px' }">
				<image src="/static/base/back.svg" class="back-icon" mode="aspectFit" />
			</view>
			<view class="header-center" :style="{ marginTop: safeTop + 'px' }">
				<text class="user-name">{{ chatUser.name }}</text>
			</view>
			<view class="header-right">
			</view>
		</view>

		<!-- 聊天内容区域 - 改用普通view + 手动滚动 -->
		<view class="chat-content" :style="{ paddingBottom: bottomPadding + 'rpx' }" ref="chatContent">
			<view :style="{height: safeTop + 'px'}"></view>
			<view class="message-list" ref="messageList">
				<!-- 消息列表 -->
				<view v-for="(message, index) in messages" :key="message.id" :id="`msg-${message.id}`"
					class="message-group">
					<!-- 时间分割线 (根据需要显示) -->
					<view v-if="shouldShowTime(message, index)" class="time-divider">
						<text class="time-text">{{ formatMessageTime(message.timestamp) }}</text>
					</view>

					<view class="message-item" :class="{ 'message-self': message.isSelf }">
						<!-- 对方消息 -->
						<template v-if="!message.isSelf">
							<image :src="chatUser.avatar" class="message-avatar left-avatar" mode="aspectFill" />
							<view class="message-wrapper">

								<!-- 文字消息 -->
								<view v-if="message.type === 'text'" class="message-bubble left-bubble">
									<text class="message-text">{{ message.content }}</text>
								</view>

								<!-- 图片消息 -->
								<view v-if="message.type === 'image'" class="message-image-wrapper"
									@click="previewImage(message.content)">
									<image :src="message.content" class="message-image" mode="aspectFill" />
								</view>
							</view>
						</template>

						<!-- 自己的消息 -->
						<template v-else>
							<view class="message-wrapper right-wrapper">
								<view class="right-message-content">
									<!-- 消息状态和内容的容器 -->
									<view class="message-with-status">

										<!-- 消息状态 -->
										<!-- <view class="message-status">
											<image v-if="message.status === 'sending'" src="/static/icons/loading.png"
												class="status-icon loading" mode="aspectFit" />
											<image v-else-if="message.status === 'sent'" src="/static/icons/sent.png"
												class="status-icon" mode="aspectFit" />
											<image v-else-if="message.status === 'read'" src="/static/icons/read.png"
												class="status-icon" mode="aspectFit" />
										</view> -->

										<!-- 文字消息 -->
										<view v-if="message.type === 'text'" class="message-bubble right-bubble">
											<text class="message-text right-text">{{ message.content }}</text>
										</view>

										<!-- 图片消息 -->
										<view v-if="message.type === 'image'" class="message-image-wrapper"
											@click="previewImage(message.content)">
											<image :src="message.content" class="message-image" mode="aspectFill" />
										</view>
									</view>
								</view>
							</view>
							<image :src="myAvatar" class="message-avatar right-avatar" mode="aspectFill" />
						</template>
					</view>
				</view>

				<!-- 底部占位 -->
				<view class="bottom-placeholder" id="bottom-anchor" ref="bottomAnchor"></view>
			</view>
		</view>

		<!-- 表情选择面板 -->
		<view v-if="showEmojiPanel" class="emoji-panel" :style="{ bottom: inputBottom + 'rpx' }">
			<view class="emoji-header">
				<text class="emoji-title">选择表情</text>
				<view class="emoji-close" @click="closeEmojiPanel">
					<text class="close-text">×</text>
				</view>
			</view>
			<scroll-view scroll-y class="emoji-content">
				<view class="emoji-grid">
					<view v-for="(emoji, index) in emojiList" :key="index" class="emoji-item"
						@click="selectEmoji(emoji)">
						<text class="emoji-text">{{ emoji }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部输入区域 -->
		<view class="input-section" :class="{ 
				'input-focus': isInputFocus,
				'emoji-active': showEmojiPanel 
			}" :style="{ bottom: inputBottom + 'rpx' }">
			<view class="input-container">
				<view class="input-tools">
					<!-- 发送图片 -->
					<view class="tool-btn" @click="chooseImage" :class="{ 'tool-active': false }">
						<image src="/static/base/message/image.svg" class="tool-icon" mode="aspectFit" />
					</view>
					<!-- 发送表情 -->
					<view class="tool-btn" @click="toggleEmojiPanel" :class="{ 'tool-active': showEmojiPanel }">
						<image src="/static/base/message/emoji.svg" class="tool-icon" mode="aspectFit" />
					</view>
				</view>

				<view class="input-wrapper">
					<input v-model="inputText" class="message-input" placeholder="输入消息..." @confirm="sendMessage"
						@focus="onInputFocus" @blur="onInputBlur" confirm-type="send" adjust-position="false"
						:focus="isFocused" ref="messageInput" />
				</view>

				<view class="send-btn" :class="{ 'send-active': inputText.trim() }" @click="sendMessage">
					<text class="send-text">发送</text>
				</view>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view v-if="showEmojiPanel" class="emoji-mask" @click="closeEmojiPanel"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safeTop: 0,
				chatUserId: '',
				inputText: '',
				scrollTop: 0,
				scrollIntoView: '', // 用于 scroll-into-view
				isInputFocus: false,
				showEmojiPanel: false,
				keyboardHeight: 0,
				emojiPanelHeight: 0, // 表情面板高度
				oldScrollTop: 0, // 记录上一次滚动位置
				keyboardHeightChangeCallback: null, // 新增：用于保存回调
				myAvatar: 'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/1.png  ',
				chatUser: {
					id: 1,
					name: '前端数据，暂无接口',
					avatar: 'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/2.png  '
				},
				messages: [{
						id: 1,
						type: 'text',
						content: '你好！看到你的设计作品很棒',
						time: '14:30',
						timestamp: new Date('2024-01-15 14:30:00').getTime(),
						isSelf: false
					},
					{
						id: 2,
						type: 'text',
						content: '谢谢你的认可！很高兴能得到你的肯定',
						time: '14:32',
						timestamp: new Date('2024-01-15 14:32:00').getTime(),
						isSelf: true,
						status: 'read'
					},
					{
						id: 3,
						type: 'text',
						content: '请问这个项目的预算大概是多少？',
						time: '14:35',
						timestamp: new Date('2024-01-15 14:35:00').getTime(),
						isSelf: false
					},
					{
						id: 4,
						type: 'text',
						content: '这个要根据具体需求来定，我们可以详细聊聊具体的设计要求和项目规模',
						time: '14:36',
						timestamp: new Date('2024-01-15 14:36:00').getTime(),
						isSelf: true,
						status: 'read'
					},
					{
						id: 5,
						type: 'image',
						content: 'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/003.jpg',
						time: '14:38',
						timestamp: new Date('2024-01-15 14:38:00').getTime(),
						isSelf: false
					},
					{
						id: 6,
						type: 'text',
						content: '这是我想要的风格，比较简约现代',
						time: '14:38',
						timestamp: new Date('2024-01-15 14:38:30').getTime(),
						isSelf: false
					},
					{
						id: 7,
						type: 'text',
						content: '好的，这个风格我很擅长，我们约个时间详细沟通一下吧',
						time: '14:40',
						timestamp: new Date('2024-01-15 14:40:00').getTime(),
						isSelf: true,
						status: 'read'
					},
					{
						id: 8,
						type: 'image',
						content: 'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/001.jpg',
						time: '14:42',
						timestamp: new Date('2024-01-17 14:42:00').getTime(),
						isSelf: true,
						status: 'read'
					},
					{
						id: 9,
						type: 'text',
						content: '这是我之前做的类似风格的作品，你可以参考一下',
						time: '14:42',
						timestamp: new Date('2024-01-17 14:42:10').getTime(),
						isSelf: true,
						status: 'read'
					},
					{
						id: 10,
						type: 'text',
						content: '哇，真的很棒！就是这种感觉',
						time: '14:45',
						timestamp: new Date('2024-01-17 14:45:00').getTime(),
						isSelf: false
					},
					{
						id: 11,
						type: 'text',
						content: '那我们可以明天下午2点视频沟通一下具体需求？',
						time: '14:46',
						timestamp: new Date('2024-01-17 14:46:00').getTime(),
						isSelf: false
					},
					{
						id: 12,
						type: 'text',
						content: '好的，没问题！明天下午2点我们视频详谈',
						time: '14:47',
						timestamp: new Date('2024-01-17 14:47:00').getTime(),
						isSelf: true,
						status: 'read'
					},
					{
						id: 13,
						type: 'text',
						content: '那就这样定了，期待明天的沟通！',
						time: '14:48',
						timestamp: new Date('2024-01-17 14:48:00').getTime(),
						isSelf: false
					},
					{
						id: 14,
						type: 'text',
						content: '好的，我也很期待！到时候见👋',
						time: '14:49',
						timestamp: new Date('2024-01-17 14:5:00').getTime(),
						isSelf: true,
						status: 'sent'
					}
				],
				imageList: [
					'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/001.jpg',
					'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/002.jpg',
					'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/003.jpg',
					'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/004.jpg',
					'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/005.jpg',
					'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/006.jpg',
					'https://dragonweb-bucket.oss-cn-beijing.aliyuncs.com/007.png',
				],
				emojiList: [
					'😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
					'😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
					'😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜',
					'🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏',
					'😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
					'😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠',
					'😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨',
					'😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', 'Ζ',
					'😶', '😐', '😑', '😬', '🙄', '😯', '😦', '😧',
					'😮', '😲', '🥱', '😴', '🤤', '😪', '😵', 'Ζ',
					'🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑',
					'🤠', '😈', '👿', '👹', '👺', '🤡', '💩', '👻',
					'💀', '☠️', '👽', '👾', '🤖', '🎃', '😺', '😸',
					'😹', '😻', '😼', '😽', '🙀', '😿', '😾', '👋',
					'🤚', '🖐️', '✋', '🖖', '👌', '🤏', '✌️', '🤞',
					'🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇',
					'☝️', '👍', '👎', '👊', '✊', '🤛', '🤜', '👏',
					'🙌', '👐', '🤲', '🤝', '🙏', '✍️', '💪', '🦾',
					'❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍',
					'🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖',
					'💘', '💝', '💟', '☮️', '✝️', '☪️', '🕉️', '☸️',
					'✡️', '🔯', '🕎', '☯️', '☦️', '🛐', '⛎', '♈',
					'♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐'
				],
				isFocused: false // 控制输入框焦点状态
			}
		},
		computed: {
			// 计算输入区域底部距离
			inputBottom() {
				return this.keyboardHeight;
			},
			// 计算聊天内容区域底部内边距
			bottomPadding() {
				return this.inputBottom + 111.04; // 64 * 1.735 = 111.04
			}
		},
		onLoad(options) {

			const {
				barTop
			} = this.$util.getWXStatusHeight();
			this.safeTop = barTop + 0; // 相当于你的 px 偏移

			this.chatUserId = options.id || '1'
			uni.setNavigationBarTitle({
				title: '聊天'
			})
			this.loadChatData()

			// 监听键盘高度变化
			this.setupKeyboardListener()

			// 初始化时滚动到底部 - 延时更长确保DOM完全渲染
			setTimeout(() => {
				this.scrollToBottom()
			}, 500)
		},
		onUnload() {
			// 正确移除监听：传入当初注册的回调函数
			if (this.keyboardHeightChangeCallback && uni.offKeyboardHeightChange) {
				uni.offKeyboardHeightChange(this.keyboardHeightChangeCallback)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			showUserInfo() {
				uni.navigateTo({
					url: `/pages/designer/profile/index?id=${this.chatUserId}`
				})
			},
			sendMessage() {
				if (!this.inputText.trim()) return

				const now = Date.now()
				const newMessage = {
					id: now,
					type: 'text',
					content: this.inputText.trim(),
					time: this.getCurrentTime(),
					timestamp: now,
					isSelf: true,
					status: 'sending'
				}

				this.showEmojiPanel = false
				this.messages.push(newMessage)
				this.inputText = ''

				// 发送消息后滚动 - 使用多重延时确保DOM更新完成
				this.$nextTick(() => {
					setTimeout(() => {
						this.scrollToBottom()
					}, 50)
				})

				// 模拟发送状态变化
				setTimeout(() => {
					newMessage.status = 'sent'
					setTimeout(() => {
						newMessage.status = 'read'
					}, 1000)
				}, 500)

				// 模拟对方回复
				setTimeout(() => {
					const replies = [
						'收到，我会尽快回复你的',
						'好的，明白了',
						'没问题！',
						'嗯嗯，了解',
						'可以的',
						'好的，谢谢！'
					]
					const randomReply = replies[Math.floor(Math.random() * replies.length)]
					const replyTime = Date.now()

					const replyMessage = {
						id: replyTime,
						type: 'text',
						content: randomReply,
						time: this.getCurrentTime(),
						timestamp: replyTime,
						isSelf: false
					}
					this.messages.push(replyMessage)

					// 回复后也滚动到底部
					this.$nextTick(() => {
						setTimeout(() => {
							this.scrollToBottom()
						}, 50)
					})
				}, 2000 + Math.random() * 2000)
			},
			chooseImage() {
				// 关闭表情面板
				this.showEmojiPanel = false
				this.emojiPanelHeight = 0

				// #ifdef MP-WEIXIN
				// 微信小程序：可能因隐私协议未配置而失败
				// #endif

				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const selectedImage = res.tempFilePaths[0]
						const now = Date.now()

						const newMessage = {
							id: now,
							type: 'image',
							content: selectedImage,
							time: this.getCurrentTime(),
							timestamp: now,
							isSelf: true,
							status: 'sending'
						}
						this.messages.push(newMessage)

						this.$nextTick(() => {
							setTimeout(() => {
								this.scrollToBottom()
							}, 100)
						})

						// 模拟上传
						setTimeout(() => {
							const ossUrl = this.imageList[Math.floor(Math.random() * this.imageList
								.length)]
							newMessage.content = ossUrl
							newMessage.status = 'sent'
							setTimeout(() => {
								newMessage.status = 'read'
							}, 1000)
						}, 1000)
					},
					fail: (err) => {
						console.error('chooseImage failed:', err)

						// #ifdef MP-WEIXIN
						if (err.errMsg && err.errMsg.includes('privacy agreement')) {
							uni.showModal({
								title: '权限未配置',
								content: '请先在小程序后台配置《用户隐私协议》，声明“相册”权限后才能上传图片。',
								showCancel: false,
								confirmText: '知道了'
							})
						} else if (err.errMsg && /auth deny|permission/.test(err.errMsg)) {
							uni.showToast({
								title: '请允许访问相册',
								icon: 'none'
							})
						}
						// #endif

						// #ifndef MP-WEIXIN
						// H5 等平台：用户取消属于正常行为，无需提示
						// #endif
					}
				})
			},
			toggleEmojiPanel() {
				this.showEmojiPanel = !this.showEmojiPanel
				if (this.showEmojiPanel) {
					// 关闭键盘
					this.blurInput()
					this.emojiPanelHeight = 381.7; // 220 * 1.735 = 381.7
				} else {
					this.emojiPanelHeight = 0
				}

				// 确保表情面板显示后滚动到底部
				setTimeout(() => {
					this.scrollToBottom()
				}, 300)
			},
			closeEmojiPanel() {
				this.showEmojiPanel = false
				this.emojiPanelHeight = 0
				setTimeout(() => {
					this.scrollToBottom()
				}, 100)
			},
			selectEmoji(emoji) {
				this.inputText += emoji
				// 自动滚动到底部，确保输入框可见
				setTimeout(() => {
					this.scrollToBottom()
				}, 50)
			},
			previewImage(url) {
				const urls = this.messages
					.filter(msg => msg.type === 'image')
					.map(msg => msg.content)

				uni.previewImage({
					urls: urls,
					current: url
				})
			},
			// 修复后的滚动到底部方法 - 使用多种方式确保滚动成功
			scrollToBottom() {
				this.$nextTick(() => {
					// 方法1: 使用scroll-into-view
					this.scrollIntoView = 'bottom-anchor'

					// 方法2: 计算并设置scrollTop
					this.getScrollViewHeight()

					// 方法3: 强制触发scrollTop变化
					setTimeout(() => {
						this.scrollIntoView = ''
						// 如果scrollTop没有变化，强制改变它
						if (this.scrollTop === this.oldScrollTop) {
							this.scrollTop = this.oldScrollTop + 1
						}
						this.oldScrollTop = this.scrollTop
					}, 100)
				})
			},

			// 获取滚动视图高度并计算scrollTop
			getScrollViewHeight() {
				uni.createSelectorQuery().in(this)
					.select('.message-list')
					.boundingClientRect((rect) => {
						if (rect) {
							// 设置一个足够大的值确保滚动到底部
							this.scrollTop = Math.max(rect.height, 10000)
						}
					}).exec()
			},
			onScrollToLower() {
				// 不再需要这个方法，因为不使用scroll-view
			},
			onInputFocus() {
				this.isInputFocus = true
				this.isFocused = true
				// 关闭表情面板
				this.showEmojiPanel = false
				this.emojiPanelHeight = 0

				// 延时滚动到底部，确保键盘完全弹起后再滚动
				setTimeout(() => {
					this.scrollToBottom()
				}, 400)
			},
			onInputBlur() {
				this.isInputFocus = false
				this.isFocused = false
			},
			blurInput() {
				this.isFocused = false
			},
			setupKeyboardListener() {
				if (uni.onKeyboardHeightChange) {
					// 定义回调函数
					this.keyboardHeightChangeCallback = (res) => {
						this.keyboardHeight = res.height
						if (res.height > 0) {
							if (this.showEmojiPanel) {
								this.showEmojiPanel = false
								this.emojiPanelHeight = 0
							}
							setTimeout(() => {
								this.scrollToBottom()
							}, 200)
						} else {
							setTimeout(() => {
								this.scrollToBottom()
							}, 200)
						}
					}

					// 注册监听
					uni.onKeyboardHeightChange(this.keyboardHeightChangeCallback)
				}
			},
			getCurrentTime() {
				const now = new Date()
				const hours = now.getHours().toString().padStart(2, '0')
				const minutes = now.getMinutes().toString().padStart(2, '0')
				return `${hours}:${minutes}`
			},
			loadChatData() {
				// 根据chatUserId加载聊天数据
				// 这里使用模拟数据
			},
			// 判断是否应该显示时间
			shouldShowTime(currentMessage, index) {
				if (index === 0) return true // 第一条消息总是显示时间

				const prevMessage = this.messages[index - 1]
				const timeDiff = currentMessage.timestamp - prevMessage.timestamp

				// 如果时间差超过5分钟（300000毫秒），则显示时间
				return timeDiff > 300000
			},
			// 格式化消息时间显示
			formatMessageTime(timestamp) {
				const msgDate = new Date(timestamp)
				const now = new Date()
				const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
				const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)
				const msgDay = new Date(msgDate.getFullYear(), msgDate.getMonth(), msgDate.getDate())

				const hours = msgDate.getHours().toString().padStart(2, '0')
				const minutes = msgDate.getMinutes().toString().padStart(2, '0')
				const timeStr = `${hours}:${minutes}`

				if (msgDay.getTime() === today.getTime()) {
					// 今天 - 只显示时间
					return timeStr
				} else if (msgDay.getTime() === yesterday.getTime()) {
					// 昨天
					return `昨天 ${timeStr}`
				} else if (msgDate.getFullYear() === now.getFullYear()) {
					// 今年 - 显示月/日
					const month = msgDate.getMonth() + 1
					const date = msgDate.getDate()
					return `${month}/${date} ${timeStr}`
				} else {
					// 往年 - 显示完整日期
					const year = msgDate.getFullYear()
					const month = msgDate.getMonth() + 1
					const date = msgDate.getDate()
					return `${year}-${month}-${date} ${timeStr}`
				}
			}
		}
	}
</script>

<style scoped>
	/* 基础样式 */
	.container {
		min-height: 100vh;
		background-color: #ededed;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		/* height: 76.34rpx; */
		/* 44 * 1.735 */
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27.76rpx;
		/* 16 * 1.735 */
		border-bottom: 1.735rpx solid #e6e6e6;
		z-index: 1000;
	}

	.header-left,
	.header-right {
		width: 76.34rpx;
		/* 44 * 1.735 */
		height: 76.34rpx;
		/* 44 * 1.735 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon,
	.more-icon {
		width: 41.64rpx;
		/* 24 * 1.735 */
		height: 41.64rpx;
		/* 24 * 1.735 */
	}

	.header-center {
		display: flex;
		align-items: center;
		gap: 13.88rpx;
		/* 8 * 1.735 */
	}

	.user-avatar {
		width: 55.52rpx;
		/* 32 * 1.735 */
		height: 55.52rpx;
		/* 32 * 1.735 */
		border-radius: 6.94rpx;
		/* 4 * 1.735 */
	}

	.user-name {
		font-size: 27.76rpx;
		/* 16 * 1.735 */
		font-weight: 500;
		color: #333333;
	}

	/* 聊天内容区域 - 改为可滚动的普通view */
	.chat-content {
		flex: 1;
		padding-top: 76.34rpx;
		/* 44 * 1.735 */
		transition: padding-bottom 0.3s ease;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		/* iOS平滑滚动 */
	}

	.message-list {
		padding: 0 27.76rpx;
		/* 12 * 1.735, 16 * 1.735 */
	}

	/* 消息组 */
	.message-group {
		margin-bottom: 13.88rpx;
		/* 8 * 1.735 */
	}

	/* 时间分割线 */
	.time-divider {
		display: flex;
		justify-content: center;
		margin: 27.76rpx 0 20.82rpx 0;
		/* 16 * 1.735, 12 * 1.735 */
	}

	.time-text {
		font-size: 20.82rpx;
		/* 12 * 1.735 */
		color: #999999;
		background-color: rgba(0, 0, 0, 0.05);
		padding: 6.94rpx 20.82rpx;
		/* 4 * 1.735, 12 * 1.735 */
		border-radius: 20.82rpx;
		/* 12 * 1.735 */
	}

	/* 消息项 */
	.message-item {
		display: flex;
		align-items: flex-start;
	}

	.message-item.message-self {
		justify-content: flex-end;
	}

	/* 头像样式 */
	.message-avatar {
		width: 69.4rpx;
		/* 40 * 1.735 */
		height: 69.4rpx;
		/* 40 * 1.735 */
		border-radius: 6.94rpx;
		/* 4 * 1.735 */
		flex-shrink: 0;
	}

	.left-avatar {
		margin-right: 13.88rpx;
		/* 8 * 1.735 */
	}

	.right-avatar {
		margin-left: 13.88rpx;
		/* 8 * 1.735 */
	}

	/* 消息包装器 */
	.message-wrapper {
		max-width: 70%;
		display: flex;
		flex-direction: column;
	}

	.right-wrapper {
		align-items: flex-end;
	}

	/* 右侧消息内容容器 */
	.right-message-content {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	/* 带状态的消息容器 */
	.message-with-status {
		display: flex;
		align-items: flex-end;
		gap: 10.41rpx;
		/* 6 * 1.735 */
	}

	/* 消息状态 */
	.message-status {
		display: flex;
		align-items: center;
		margin-bottom: 3.47rpx;
		/* 2 * 1.735 */
	}

	.status-icon {
		width: 27.76rpx;
		/* 16 * 1.735 */
		height: 27.76rpx;
		/* 16 * 1.735 */
	}

	.status-icon.loading {
		animation: rotate 1s linear infinite;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 消息气泡 */
	.message-bubble {
		/* 去掉字体就可以自己缩放 */
		font-size: 26.025rpx;
		/* 15 * 1.735 */
		border-radius: 13.88rpx;
		/* 8 * 1.735 */
		padding: 10.41rpx 20.82rpx;
		/* 6 * 1.735, 12 * 1.735 */
		position: relative;
		word-wrap: break-word;
		word-break: break-all;
	}

	.left-bubble {
		background-color: #ffffff;
		border-top-left-radius: 6.94rpx;
		/* 4 * 1.735 */
		box-shadow: 0 1.735rpx 3.47rpx rgba(0, 0, 0, 0.1);
	}

	.right-bubble {
		background-color: #95ec69;
		border-top-right-radius: 6.94rpx;
		/* 4 * 1.735 */
	}

	/* 消息文本 */
	.message-text {
		font-size: 26.025rpx;
		/* 15 * 1.735 */
		color: #333333;
		line-height: 1.4;
	}

	.right-text {
		color: #333333;
	}

	/* 图片消息 */
	.message-image-wrapper {
		border-radius: 13.88rpx;
		/* 8 * 1.735 */
		overflow: hidden;
		max-width: 347rpx;
		/* 200 * 1.735 */
		min-width: 208.2rpx;
		/* 120 * 1.735 */
	}

	.message-image {
		width: 100%;
		min-height: 208.2rpx;
		/* 120 * 1.735 */
		max-height: 347rpx;
		/* 200 * 1.735 */
	}

	/* 表情选择面板 */
	.emoji-panel {
		position: fixed;
		left: 0;
		right: 0;
		height: 381.7rpx;
		/* 220 * 1.735 */
		background-color: #ffffff;
		border-top: 1.735rpx solid #e6e6e6;
		z-index: 999;
		transition: bottom 0.3s ease;
	}

	.emoji-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20.82rpx 27.76rpx;
		/* 12 * 1.735, 16 * 1.735 */
		border-bottom: 1.735rpx solid #f0f0f0;
	}

	.emoji-title {
		font-size: 27.76rpx;
		/* 16 * 1.735 */
		color: #333333;
		font-weight: 500;
	}

	.emoji-close {
		width: 55.52rpx;
		/* 32 * 1.735 */
		height: 55.52rpx;
		/* 32 * 1.735 */
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 27.76rpx;
		/* 16 * 1.735 */
		background-color: #f5f5f5;
	}

	.close-text {
		font-size: 34.7rpx;
		/* 20 * 1.735 */
		color: #666666;
		line-height: 1;
	}

	.emoji-content {
		height: 312.3rpx;
		/* 180 * 1.735 */
	}

	.emoji-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 20.82rpx 13.88rpx;
		/* 12 * 1.735, 8 * 1.735 */
	}

	.emoji-item {
		width: 12.5%;
		height: 69.4rpx;
		/* 40 * 1.735 */
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 13.88rpx;
		/* 8 * 1.735 */
	}

	.emoji-text {
		font-size: 41.64rpx;
		/* 24 * 1.735 */
		line-height: 1;
	}

	/* 表情遮罩 */
	.emoji-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 998;
	}

	/* 底部输入区域 */
	.input-section {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #f7f7f7;
		border-top: 1.735rpx solid #e6e6e6;
		z-index: 1000;
		transition: all 0.3s ease;
	}

	.input-section.input-focus {
		background-color: #ffffff;
	}

	.input-section.emoji-active {
		background-color: #ffffff;
	}

	.input-container {
		padding: 13.88rpx 27.76rpx;
		/* 8 * 1.735, 16 * 1.735 */
		display: flex;
		align-items: center;
		gap: 13.88rpx;
		margin: 10rpx 0 20rpx;
		/* 8 * 1.735 */
	}

	.input-tools {
		display: flex;
		gap: 13.88rpx;
		/* 8 * 1.735 */
	}

	.tool-btn {
		width: 62.46rpx;
		/* 36 * 1.735 */
		height: 62.46rpx;
		/* 36 * 1.735 */
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border-radius: 10.41rpx;
		/* 6 * 1.735 */
		border: 1.735rpx solid #e6e6e6;
		transition: all 0.2s ease;
	}

	.tool-btn.tool-active {
		background-color: #07c160;
		border-color: #07c160;
	}

	.tool-active .tool-icon {
		filter: brightness(0) invert(1);
	}

	.tool-icon {
		width: 38.17rpx;
		/* 22 * 1.735 */
		height: 38.17rpx;
		/* 22 * 1.735 */
	}

	.input-wrapper {
		flex: 1;
	}

	.message-input {
		width: 90%;
		height: 62.46rpx;
		/* 36 * 1.735 */
		background-color: #ffffff;
		border-radius: 10.41rpx;
		/* 6 * 1.735 */
		border: 1.735rpx solid #e6e6e6;
		padding: 0 20.82rpx;
		/* 12 * 1.735 */
		font-size: 27.76rpx;
		/* 16 * 1.735 */
		color: #333333;
	}

	.send-btn {
		font-size: 27.76rpx;
		/* 16 * 1.735 */
		padding: 6.94rpx 27.76rpx;
		/* 4 * 1.735, 16 * 1.735 */
		background-color: #cccccc;
		border-radius: 10.41rpx;
		/* 6 * 1.735 */
		transition: background-color 0.2s ease;
	}

	.send-btn.send-active {
		background-color: #07c160;
	}

	.send-text {
		font-size: 24.29rpx;
		/* 14 * 1.735 */
		color: #ffffff;
		font-weight: 500;
	}

	/* 底部占位 */
	.bottom-placeholder {
		height: 34.7rpx;
		/* 20 * 1.735 */
	}
</style>